<template>
    <draggable
        class="drag-sub-list-ul"
        :list="list"
        tag="ul"
        handle=".handle"
        ghost-class="ghost"
        filter=".no-drag"
        :sort="false"
        :clone="onClone"
        :move="onDragMove"
        :group="{ name: 'tagModel', pull: 'clone', put: false }"
    >
        <template v-if="showImg">
            <template v-for="item in renderList">
                <li class="drag-sub-list-li handle" :key="item.valueKindId">
                    <div class="tag" @click="handleItemClick(item, 'add')">
                        <div class="img" :class="item.value"></div>
                        <p>{{ item.name }}</p>
                    </div>
                </li>
            </template>
        </template>
        <template v-else-if="isSelect">
            <template v-for="item in renderList">
                <li class="drag-sub-list-li handle" :key="item.valueKindId">
                    <div class="tag" @click="handleItemClick(item, 'add')">
                        <el-dropdown>
                            <span class="el-dropdown-link">
                                <span
                                    class="title"
                                    :title="item.dropDownBoxName"
                                    >{{ item.dropDownBoxName }}</span
                                >
                                <i
                                    class="el-icon-arrow-down el-icon--right"
                                ></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item
                                    v-for="(it, i) in item.list"
                                    :key="i"
                                    >{{ it }}</el-dropdown-item
                                >
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                </li>
            </template>
        </template>
        <template v-else>
            <template v-for="item in renderList">
                <li
                    class="drag-sub-list-li handle"
                    :key="item.id"
                    v-if="
                        !item.batch &&
                            !['importTable', 'importImg'].includes(item.id)
                    "
                >
                    <el-tooltip
                        effect="dark"
                        :disabled="true"
                        :content="item.name"
                        placement="top"
                    >
                        <el-button
                            plain
                            @click="handleItemClick(item, 'add')"
                            >{{ item.name }}</el-button
                        >
                    </el-tooltip>
                </li>
                <li
                    class="import-li"
                    v-else-if="item.id === 'importTable'"
                    :key="item.id"
                >
                    <div class="file-update">
                        <upload-img-get-options
                            @importOptions="importOptions"
                            accept=".xls,.xlsx"
                        >
                            <el-button class="file-update-btn table" plain
                                ><span class="img-bg"></span
                                ><span>导入表格</span></el-button
                            >
                        </upload-img-get-options>
                    </div>
                </li>
                <li
                    class="import-li"
                    v-else-if="item.id === 'importImg'"
                    :key="item.id"
                >
                    <div class="file-update">
                        <upload-img-get-options
                            @importOptions="importOptions"
                            accept=".png,.jpg"
                        >
                            <el-button class="file-update-btn img" plain
                                ><span class="img-bg"></span
                                ><span>导入图片</span></el-button
                            >
                        </upload-img-get-options>
                    </div>
                </li>
                <li
                    class="drag-sub-list-li batch-li row1"
                    :key="item.batch"
                    @click="handleItemClick(item, 'add', creatNumber, $event)"
                    v-else-if="item.batch === 'batch'"
                >
                    <div>
                        <el-input
                            size="mini"
                            placeholder="1"
                            v-model="creatNumber"
                            @input="checkInput"
                            @blur="blurInput(creatNumber)"
                            @keyup.enter.native="
                                handleItemClick(item, 'add', creatNumber)
                            "
                        ></el-input>
                        <p>批量添加表单项</p>
                    </div>
                </li>
                <li
                    class="drag-sub-list-li batch-li batch-resource"
                    :key="item.batch"
                    @click="selectResource"
                    v-else
                >
                    <div>常用资源项</div>
                </li>
            </template>
        </template>
        <!--        <template v-if="list.length >= 8">
            <li class="drag-sub-list-li no-drag">
                <el-button plain type="info" @click="toggoleMore">
                    <template v-if="!showMore">
                        展开更多<i class="el-icon-d-arrow-right"></i>
                    </template>
                    <template v-else>
                        收起更多<i class="el-icon-d-arrow-left"></i>
                    </template>
                </el-button>
            </li>
        </template>-->
    </draggable>
</template>

<script lang="ts">
import { Component, Vue, Prop, Watch } from "vue-property-decorator";
import { getRandomId } from "@/utils";
import UploadImgGetOptions from "@/views/module-manage/src/components/upload-img-get-options/index.vue";
import { importResources } from "@/views/module-manage/src/components/import-resources-item/index";
import draggable from "vuedraggable";

@Component({
    components: {
        draggable,
        UploadImgGetOptions
    }
})
export default class DragList extends Vue {
    @Prop({
        type: Array,
        default: () => {
            return [];
        }
    })
    readonly list!: any | any[];

    @Prop({
        type: Boolean,
        default: () => {
            return false;
        }
    })
    readonly showAll!: boolean;

    @Prop({
        type: Boolean,
        default: () => {
            return false;
        }
    })
    readonly showImg!: boolean;

    @Prop({
        type: Boolean,
        default: () => {
            return false;
        }
    })
    readonly isSelect!: boolean;

    showMore = false;
    creatNumber = 1;
    allModel: any = {};

    get _isReadOnly() {
        return (
            this.$route.query.isDetail === "1" ||
            this.$route.query.isSend === "send"
        );
    }

    get renderList() {
        /* if (this.showMore || this.showAll) {
            return this.list;
        } else {
            return this.list.slice(0, 7);
        } */
        return this.list || [];
    }

    @Watch("renderList", { immediate: true, deep: true })
    setAllModel() {
        this.allModel = {};
        this.renderList.forEach((item: any, index: any) => {
            this.allModel[index] = 0;
        });
    }

    // 校验数字
    checkInput(val: any) {
        if (val && val !== "-") {
            this.creatNumber = parseInt(val) > 30 ? 30 : parseInt(val) || 1;
        } else if (val !== "") {
            this.creatNumber = 1;
        }
    }

    blurInput(val: any) {
        if (!val) this.creatNumber = 1;
    }

    handleItemClick(item: any, type: string, number?: number, event?: any) {
        if (
            this._isReadOnly ||
            (event && event.target.className === "el-input__inner")
        ) {
            return;
        }
        if (this.isSelect) {
            const options = item.list.map((cur: any) => {
                return { name: cur, tempId: getRandomId() };
            });
            item = {
                ...item,
                name: item.dropDownBoxName,
                itemType: 2,
                tempId: getRandomId(),
                value: item.boxFlag.toString() === "6" ? "select" : "cascader",
                valueKindId: item.boxFlag.toString(),
                placeholder: "请选择",
                options
            };
        } else {
            item = {
                ...item,
                tempId: getRandomId(),
                placeholder: ["6", "7", "3", "11"].includes(item.valueKindId)
                    ? "请选择"
                    : ["1", "2", "12"].includes(item.valueKindId)
                        ? "请输入"
                        : "",
                valueLength: item.valueKindId === "12" ? "" : ""
            };
        }
        this.$emit("item-click", this.onClone(item), type, number || 1);
    }

    onClone(e: any) {
        let name = "";
        if (e.itemType === 0) {
            name = "分组";
        } else if (e.itemType === 1) {
            name = "表格";
        } else {
            name = "表单项";
        }
        return {
            ...e,
            name: this.showImg || this.isSelect ? e.name : name,
            _key: +new Date(),
            _number: e.batch ? this.creatNumber : undefined
        };
    }

    onDragMove(e: any) {
        if (this._isReadOnly) return;
        const { draggedContext, relatedContext } = e;
        const className2 = this.getParentClassName(
            relatedContext.component.$el,
            2
        ).className;
        if (
            draggedContext.element.itemType === 1 &&
            className2 === "child-table-content"
        ) {
            return false;
        }
        if (
            draggedContext.element.itemType === 0 &&
            className2 === "child-table-content"
        ) {
            return false;
        }
        if (
            draggedContext.element.itemType === 0 &&
            className2 === "el-collapse-item__content"
        ) {
            return false;
        }
    }

    // 获取父级组件class
    getParentClassName(node: any, n: number) {
        let e = node;
        for (let i = 0; i < n; i++) {
            e = e ? e.parentElement : "";
        }
        return e || {};
    }

    importOptions(list: any) {
        this.$emit("batchAdd", list);
    }

    toggoleMore() {
        this.showMore = !this.showMore;
    }

    selectResource() {
        importResources({
            sure: (vm: any, model: any) => {
                vm.close();
                this.$emit("batchImport", model.selectedList);
            }
        });
    }
}
</script>

<style lang="scss" scoped>
.row1 {
    width: 100% !important;
}
</style>
